<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台管理中心</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="./css/layui.css">
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <script>
    window.onload = function () {

      /**
       * 获取cookie
       **/
      function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i].trim();
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }

      /**
       * 设置cookie
       * **/
      function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }

      let username = getCookie('username');
      //判断cookie是否存在，不存在则进行登录
      if(!username){
        window.location.href = './login.html';
      }
      document.querySelector('#managerName').innerText = username;

      document.querySelector('#logout').addEventListener('click', function () {
        let flag = window.confirm('确定要退出登录么？');
        if (flag) {
          //清除cookie
          setCookie('username', '', -1);
          window.location.href = './login.html';
        } else {
          window.alert('你取消了退出');
        }
      });
      //用户列表
      document.querySelector('#userList').addEventListener('click', function () {
        // document.querySelector('#bodyContent').innerHTML = 'hello';
        let content = `
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>m_id</th>
              <th>username</th>
              <th>password</th>
              <th>nick</th>
              <th>createtime</th>
              <th>headerimg</th>
            </tr>
          </thead>
          <tbody id="t1">
        `;
        let xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open('GET', 'http://localhost:8089/api/manager/list', true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              let result = JSON.parse(xmlHttp.responseText);
              if (result.resultCode == 1) {
                //console.log(result.resultInfo);
                for (let i = 0; i < result.resultInfo.length; i++) {
                  content += `
                  <tr>
                    <td>${result.resultInfo[i].m_id}</td>
                    <td>${result.resultInfo[i].username}</td>
                    <td>${result.resultInfo[i].password}</td>
                    <td>${result.resultInfo[i].nick}</td>
                    <td>${result.resultInfo[i].createtime}</td>
                    <td><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" width='50px'></td>
                  </tr>
                  `;
                }
                content += `
                    </tbody>
                </table>
                `;
                document.querySelector('#bodyContent').innerHTML = content;
              }

            }
          }
        }


      });

      //添加用户
      document.querySelector('#addUser').addEventListener('click', function () {
        //document.querySelector('#bodyContent').innerHTML = '添加用户';
        
      });

      //商品列表
      document.querySelector('#goodsList').addEventListener('click', function () {
        let content = `
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>id</th>
              <th>shop</th>
              <th>picture</th>
              <th>product</th>
              <th>price</th>
              <th>oldprice</th>
              <th>putaway</th>
              <th>detail</th>
              <th>categoryname</th>
            </tr>
          </thead>
          <tbody id="t1">
        `;
        let xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open('GET', 'http://localhost:8089/api/shop/list', true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              let result = JSON.parse(xmlHttp.responseText);
              if (result.resultCode == 1) {
                //console.log(result.resultInfo);
                for (let i = 0; i < result.resultInfo.list.length; i++) {
                  content += `
                  <tr>
                    <td>${result.resultInfo.list[i].id}</td>
                    <td>${result.resultInfo.list[i].shop}</td>
                    <td><img src='${result.resultInfo.list[i].picture}' width='100px'></td>
                    <td>${result.resultInfo.list[i].product}</td>
                    <td>${result.resultInfo.list[i].price}</td>
                    <td>${result.resultInfo.list[i].oldprice}</td>
                    <td>${result.resultInfo.list[i].putaway}</td>
                    <td>${result.resultInfo.list[i].detail}</td>
                    <td>${result.resultInfo.list[i].categoryname}</td>
                  </tr>
                  `;
                }
                content += `
                    </tbody>
                </table>
                `;
                document.querySelector('#bodyContent').innerHTML = content;
              }

            }
          }
        }

      });

      //商品分类列表
      document.querySelector('#categoryList').addEventListener('click', function () {
        let content = `
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>id</th>
              <th>name</th>
            </tr>
          </thead>
          <tbody id="t1">
        `;
        let xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open('GET', 'http://localhost:8089/api/shop/category/list', true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              let result = JSON.parse(xmlHttp.responseText);
              if (result.resultCode == 1) {
                //console.log(result.resultInfo);
                for (let i = 0; i < result.resultInfo.list.length; i++) {
                  content += `
                  <tr>
                    <td>${result.resultInfo.list[i].id}</td>
                    <td>${result.resultInfo.list[i].name}</td>
                  </tr>
                  `;
                }
                content += `
                    </tbody>
                </table>
                `;
                document.querySelector('#bodyContent').innerHTML = content;
              }

            }
          }
        }
      });

      //banner列表
      document.querySelector('#bannerList').addEventListener('click', function () {
        let content = `
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>id</th>
              <th>url</th>
              <th>content</th>
              <th>number</th>
            </tr>
          </thead>
          <tbody id="t1">
        `;
        let xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open('GET', 'http://localhost:8089/api/shop/banner', true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              let result = JSON.parse(xmlHttp.responseText);
              if (result.resultCode == 1) {
                //console.log(result.resultInfo);
                for (let i = 0; i < result.resultInfo.list.length; i++) {
                  content += `
                  <tr>
                    <td>${result.resultInfo.list[i].id}</td>
                    <td><img src='${result.resultInfo.list[i].url}' width='200px'></td>
                    <td>${result.resultInfo.list[i].content}</td>
                    <td>${result.resultInfo.list[i].number}</td>
                  </tr>
                  `;
                }
                content += `
                    </tbody>
                </table>
                `;
                document.querySelector('#bodyContent').innerHTML = content;
              }

            }
          }
        }
      });

      //访客列表
      document.querySelector('#visitorList').addEventListener('click', function () {
        let content = `
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>uid</th>
              <th>username</th>
              <th>headerimg</th>
              <th>age</th>
              <th>sex</th>
              <th>visitgoal</th>
              <th>visittime</th>
              <th>education</th>
              <th>company</th>
            </tr>
          </thead>
          <tbody id="t1">
        `;
        let xmlHttp = new window.XMLHttpRequest();
        xmlHttp.open('GET', 'http://localhost:8089/api/list', true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              let result = JSON.parse(xmlHttp.responseText);
              if (result.resultCode == 1) {
                //console.log(result.resultInfo);
                for (let i = 0; i < result.resultInfo.length; i++) {
                  content += `
                  <tr>
                    <td>${result.resultInfo[i].uid}</td>
                    <td>${result.resultInfo[i].username}</td>
                    <td><img src='//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg' width='50px'></td>
                    <td>${result.resultInfo[i].age}</td>
                    <td>${result.resultInfo[i].sex}</td>
                    <td>${result.resultInfo[i].visitgoal}</td>
                    <td>${result.resultInfo[i].visittime}</td>
                    <td>${result.resultInfo[i].education}</td>
                    <td>${result.resultInfo[i].company}</td>
                  </tr>
                  `;
                }
                content += `
                    </tbody>
                </table>
                `;
                document.querySelector('#bodyContent').innerHTML = content;
              }

            }
          }
        }
      });

      //添加商品
      document.querySelector('#addGoods').addEventListener('click', function () {
        let content = `
        <div class="layui-card">
          <div class="layui-card-header">添加商品</div>
          <div class="layui-card-body">
        `;
        content += `
            <div class="layui-form-item">
              <label class="layui-form-label">店铺</label>
              <div class="layui-input-block">
                <input type="text" name="title" id='shopName' required  lay-verify="required" placeholder="请输入店铺名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">图片</label>
              <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">
                  <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">商品</label>
              <div class="layui-input-block">
                <input type="text" id='product' name="title" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">价格</label>
              <div class="layui-input-block">
                <input type="text" id="price" name="title" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">原价</label>
              <div class="layui-input-block">
                <input type="text" id="oldprice" name="title" required  lay-verify="required" placeholder="请输入商品原价" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">上架</label>
              <div class="layui-input-block">
                <input type="number" id="putaway" min='0' max='1' name="title" required  lay-verify="required" placeholder="是否上架：1上架， 0下架" autocomplete="off" class="layui-input">
              </div>
            </div>

            <button type="button" class="layui-btn" id='submitGoods' >添加商品</button>
          </div>
        </div>
        
        `;
        document.querySelector('#bodyContent').innerHTML = content;
      });

      //添加商品
      document.querySelector('#bodyContent').onclick = function (e) {
        var target = e.target || e.srcElement;
        if (target.nodeName.toLowerCase() == 'button' && target.innerText == '添加商品') {
          let shop = document.querySelector('#shopName').value;
          let picture =
            'https://fuss10.elemecdn.com/0/85/8c35871b76aee22028071ab5f946ejpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/';
          let product = document.querySelector('#product').value;
          let price = document.querySelector('#price').value;
          let oldprice = document.querySelector('#oldprice').value;
          let putaway = document.querySelector('#putaway').value
          let categoryId = 1;
          let xmlHttp = new window.XMLHttpRequest();
          xmlHttp.open('POST', 'http://localhost:8089/api/shop/add', true);
          xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
          xmlHttp.send(
            `shop=${shop}&picture=${picture}&product=${product}&price=${price}&oldprice=${oldprice}&putaway=${putaway}&categoryId=${categoryId}`
          );
          xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
              if (xmlHttp.status == 200) {
                let result = JSON.parse(xmlHttp.responseText);
                if (result.resultCode == 1) {
                  window.alert('添加商品成功');
                }
              }
            }
          }
        }
      }

    }
  </script>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">后台管理中心</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="javascript:;">
            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
              class="layui-nav-img">
            <span id="managerName"></span>
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">Your Profile</a></dd>
            <dd><a href="">Settings</a></dd>
            <dd><a href="javascript:;" id="logout">退出登录</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <!-- <li class="layui-nav-item "> -->
            <a class="" href="javascript:;">用户管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id='userList'>用户列表</a></dd>
              <dd><a href="javascript:;" id='addUser'>添加用户</a></dd>
              <!-- <dd><a href="javascript:;">menu 3</a></dd> -->
              <!-- <dd><a href="">the links</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">商品管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id='goodsList'>商品列表</a></dd>
              <dd><a href="javascript:;" id='addGoods'>添加商品</a></dd>
              <!-- <dd><a href="">超链接</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">商品分类</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id="categoryList">分类列表</a></dd>
              <dd><a href="javascript:;">添加分类</a></dd>
              <!-- <dd><a href="">超链接</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">banner管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id="bannerList">banner分类</a></dd>
              <dd><a href="javascript:;">添加banner</a></dd>
              <!-- <dd><a href="">超链接</a></dd> -->
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">访客管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id="visitorList">访客列表</a></dd>
              <dd><a href="javascript:;">添加访客</a></dd>
              <!-- <dd><a href="">超链接</a></dd> -->
            </dl>
          </li>
          <!-- <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li> -->
          <!-- <li class="layui-nav-item"><a href="">the links</a></li> -->
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;" id="bodyContent">
        <div class="layui-card">
          <div class="layui-card-header">欢迎使用</div>
          <div class="layui-card-body">
            
          </div>
        </div>
      </div>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      底部固定区域
    </div>
  </div>
  <!-- 引入 layui.js -->
  <script src="./js/layui.js"></script>
  <script>
    //JS 
    layui.use(['element', 'layer', 'util'], function () {
      var element = layui.element,
        layer = layui.layer,
        util = layui.util,
        $ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function (othis) {
          layer.msg('展开左侧菜单的操作', {
            icon: 0
          });
        },
        menuRight: function () {
          layer.open({
            type: 1,
            content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
            area: ['260px', '100%'],
            offset: 'rt' //右上角
              ,
            anim: 5,
            shadeClose: true
          });
        }
      });

    });
  </script>
</body>

</html>